<template>
	<scroll-view class="mineAddress" scroll-y="true">
		<view  class="content">
			<template v-if="addressInfo.length>0 && defaultAddressInfo.length>0">
				<view class="address" v-for="item1 in defaultAddressInfo" :key="item1.addressId">
					<view class="addressImage">
						<image src="https://z3.ax1x.com/2021/04/10/casxiT.png"></image>
					</view>
					<view class="addresslist">
						<view>
							<text class="name">{{item1.addressContactName}}</text>
							<text class="call">{{item1.addressContactTel}}</text>
						</view>
						<view>
							<view class="text">
								<text class="text1">默认驿站</text>
								<text>{{item1.addressDetail}}</text>
							</view>
						</view>
						<view>使用菜鸟驿站默认同意暂存条例</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 系统保存的地址数据渲染 -->
		<view class="saveAddress">
			<template v-if="addressInfo.length<=0">
				<view>暂无地址，先去新增地址吧~</view>
			</template>
			<template v-else>
				<view class="address" v-for="item in addressInfo" :key="item.addressId">
					<view class="addressImage">
						<image src="https://z3.ax1x.com/2021/04/10/casxiT.png"></image>
					</view>
					<view class="addresslist">
						<view>
							<text class="name">{{item.addressContactName}}</text>
							<text class="call">{{item.addressContactTel}}</text>
						</view>
						<view>
							<view class="text">
								<text>{{item.addressDetail}}</text>
							</view>
						</view>
						<view class="operation">
							<view class="defaulAddress">
								<radio color="#FF5300" :checked="item.isDefaultAddress==1" @click="changeState(item.addressId)" style="transform: scale(0.7);"></radio>
								<text>默认地址</text>
							</view>
							<text @click="delAddressOne({addressId:item.addressId})">删除</text>
						</view>
					</view>
					<view class="modify">
						<navigator :url="'../../mall/mall-modify/mall-modify?addressId='+item.addressId" hover-class="none" open-type="navigate">
							<text> 编辑</text>
						</navigator>
						
					</view>
				</view>
			</template>
		</view>
		<view class="addAddress">
			<navigator url="../../mall/mall-add-address/mall-add-address">
				<text>添加新地址</text>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
	import {createNamespacedHelpers} from "vuex"
	let {mapActions,mapState}=createNamespacedHelpers("mine")
	export default {
		data() {
			return {
			};
		},
		onLoad() {
			this.getAddressAll()
		},

		methods:{
			...mapActions(["getAddressAll","delAddressOneInfo"]),
			 delAddressOne(val){
				let that=this
				uni.showModal({
					title:"删除地址",
					content:"您是否要删除地址",
					async success(res) {
						if (res.confirm) {
							let data = await that.delAddressOneInfo(val);
							if(data.code==1352){
								uni.showToast({
									title:"删除成功！",
									success() {
										that.getAddressAll()
									}
								})
							}
						};
					}
				})
			},
			changeState(id){
				this.addressInfo.forEach((item)=>{
					if(item.addressId==id){
						if(item.isDefaultAddress==0){
							uni.showModal({
								title:"",
								content:"确定要将该地址设为默认地址吗？",
								success(res) {
									if(res.confirm){
										return item.isDefaultAddress=1
									}
								}
							})
						}
						else{
							uni.showModal({
								title:"",
								content:"确定要取消该默认地址吗？",
								success(res) {
									if(res.confirm){
										return item.isDefaultAddress=0
									}
								}
							})
						}
					}
					else{
						return item.isDefaultAddress=0
					}
				})
			}
		},
		computed:{
			...mapState(["addressInfo"]),
			defaultAddressInfo(){
				return this.addressInfo.filter((item)=>item.isDefaultAddress==1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mineAddress{
		height: 100vh;
		padding: 12rpx;
		background-color: #f5f5f5;
		box-sizing: border-box;
		position: relative;
		.content{
			/* 地址 */
			.address{
				width: 100%;
				background-color: #ffffff;
				border-radius: 10rpx;
				display: flex;
				box-sizing: border-box;
				padding: 10rpx;
				.addressImage{
					width: 15%;
					height: 160rpx;
					// background-color: #4CD964;
					display: flex;
					align-items: center;
					image{
						width: 95%;
						height: 90rpx;
					}
				}
				.addresslist{
					box-sizing: border-box;
					padding: 10rpx;
					width: 85%;
					view{
						&:nth-of-type(1){
							margin-bottom: 10rpx;
							.name{
								font-weight: bold;
								opacity: 0.8;
								font-size: 30rpx;
								margin-right: 20rpx;
							}
							.call{
								color: #555555;
								opacity: 0.8;
								font-size: 26rpx;
							}
							
						}
						&:nth-of-type(2){
							margin-bottom: 10rpx;
							.text{
								width: 95%;
								color: #000000;
								font-size: 26rpx;
								.text1{
									color: #333333;
									display: inline-block;
									border-radius: 5rpx;
									align-items: center; 
									background-color: #dfdfdf;
									margin-right: 20rpx;
								}
									
							}
						
						}
						&:nth-of-type(3){
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #333333;
							opacity: 0.8;
						}
						
					}
				}
			}
		}
		// 保存的地址
		.saveAddress{
			margin-top: 20rpx;
			/* 地址 */
			.address{
				width: 100%;
				background-color: #ffffff;
				border-radius: 10rpx;
				display: flex;
				box-sizing: border-box;
				padding: 10rpx;
				.addressImage{
					width: 15%;
					height: 160rpx;
					// background-color: #4CD964;
					display: flex;
					align-items: center;
					image{
						width: 95%;
						height: 90rpx;
					}
				}
				.addresslist{
					box-sizing: border-box;
					padding: 10rpx;
					width: 75%;
					view{
						&:nth-of-type(1){
							margin-bottom: 10rpx;
							.name{
								font-weight: bold;
								opacity: 0.8;
								font-size: 30rpx;
								margin-right: 20rpx;
							}
							.call{
								color: #555555;
								opacity: 0.8;
								font-size: 26rpx;
							}
							
						}
						&:nth-of-type(2){
							display: flex;
							justify-content: space-between;
							margin-bottom: 10rpx;
							.text{
								width: 85%;
								color: #000000;
								font-size: 26rpx;
									
							}
							
						
						}
					}
					.operation{
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
					}
				}
				.modify{
					width: 15%;
					font-size: 28rpx;
					color: #b3b2b6;
					display: flex;
					align-items: center;
					text{
						width: 80rpx;
						line-height: 60rpx;
						padding-left: 20rpx;
						height: 60rpx;
						display: inline-block;
						border-left: 1rpx solid  #c4c3c7;
					}
				}
			}
		}
		.addAddress{
			width: 100vw;
			height: 100rpx;
			background-color: white;
			position: absolute;
			bottom: 0rpx;
			line-height: 100rpx;
			text-align: center;
			color: tomato;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

</style>
